<template>






	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>形象列表</text>
		</view>


		<view class="flex-start-center " style="color:#333333;margin-left: 10rpx;" @click="localFn()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 形象列表</text>
		</view>


		<sunui-navbar :items="tabList" lineHeight="100rpx" :isCenter="true" :currentIndex="navIndex" padding="20rpx"
			activeColor="#1E6CEB" :size="220" activeLineBg="#1E6CEB" textAlign="center" activeLineWidth="50%"
			activeDirection="center" activeLineHeight="4rpx" bgColor="transparent" @change="getChange"></sunui-navbar>
		<view v-if="navIndex==0" style="padding: 20rpx;">





			<view class="display-a margin-bottom_30rpx margin-top_30rpx">
				<view class="label" @click="getLabel(0)"
					:style="selLabel == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					全部</view>
				<view class="label" @click="getLabel(1)"
					:style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					生成中</view>
				<view class="label" @click="getLabel(2)"
					:style="selLabel == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					生成成功</view>
				<view class="label" @click="getLabel(3)"
					:style="selLabel == 3 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					生成失败</view>

			</view>

			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="flex-wrap-flex-start-center">
					<!-- 增加数字人 -->
					<view class="add-digital-cls flex-column" style="margin-top: 33rpx;" @click="addDigital()">
						<image mode="widthFix" :src="group3389Nine"></image>
						<view>增加数字人</view>
					</view>
					<!-- 数字人形象列表 -->
					<view class="container " style=" margin-top: 30rpx;"
						:style="{marginRight:index==1?' 0rpx':   ((index-4) % 3)==0?'0':'12rpx'}"
						v-for="(item,index) in list" :key="index">

						<image class="digitImg" :src="item.video_cover" mode="aspectFill"></image>



						<view class=" font-overflow  border-bottom-ECECEC " style="padding: 10rpx 10rpx 10rpx 10rpx;">
							{{item.name}}
						</view>

						<view class="flex-around margin_10rpx_0"
							v-if="item.is_status==2||item.check_status==3||item.is_status==3">
							<image class="icon" :src="group3376Nine" mode="" @click="delavatar(item)"></image>
							<image class="icon" :src="group3377Nine" mode="" @click="paste(item.video_url)"></image>
							<image class="icon" :src="group3378Nine" mode="" @click="longpress(item.video_url)"></image>
						</view>
						<view class="flex-around margin_10rpx_0" v-else>
							<image class="icon" :src="group3379Nine" mode=""></image>
							<image class="icon" :src="group3380Nine" mode=""></image>
							<image class="icon" :src="group3381Nine" mode=""></image>
						</view>
						<!-- 审核状态 (1:待审核,2:审核通过,3:审核驳回)
						1:生成中,2:生成成功,3:生成失败 -->
						<view class=" flex"
						     v-if="item.check_status!=2"
							:class="item.check_status==1?'statusColorG':item.check_status==2?'statusColorB':'statusColorR'">
							{{item.check_status==1?'待审核':item.check_status==2?'审核通过':'已驳回'}}
						</view>
						
						<view class=" flex"
						     v-else
							:class="item.is_status==1?'statusColorG':item.is_status==2?'statusColorB':'statusColorR'">
							{{item.is_status==1?'生成中':item.is_status==2?'生成成功':'生成失败'}}
						</view>
						
						<view class="mask flex" v-if="item.check_status==3||item.check_status==1">
							<text v-if="item.check_status==1" class="font-overflow " style="width: 200rpx;">联系管理员审核</text>
							<text v-if="item.check_status==3" class="font-overflow "
								style="width: 190rpx;color: red;font-size: 20rpx">已驳回:{{item.refuse}}</text>
						</view>

					</view>


				</view>
			</mescroll-body>
			<sunui-popup ref="pop">
				<template v-slot:content>
					<view class="v-pop-cls">
						<view class="margin-bottom_50rpx font-size_36rpx display-a-jc">数字人形象名称</view>
						<view class="flex-start-center">
							<view class="margin-right_30rpx">
								名称
								<span class="must">*</span>
							</view>
							<input style="height: 76rpx;padding: 0 22rpx;width: 73%;" type="text" v-model="name"
								class="input-frame" placeholder="请输入数字人形象名称" placeholder-class="placeholder" />
						</view>


						<view class="sunui-flex-space-around margin-top_60rpx">
							<view class="confirm-btn" @click="confirm()">确认</view>
							<view class="confirm-btn" @click="cancel()">取消</view>
						</view>
					</view>
				</template>
			</sunui-popup>

			<!-- 训练前提示 弹框 -->
			<sunui-popup ref="pop2">
				<template v-slot:content>
					<view class="v-pop-cls">
						<view class="video-title-cls flex">数字人视频要求</view>
						<view class="detail-cls">请在光线清楚的环境下，使用主摄像头，保持镜头
							平视按下方要求录制上半身和全身视频。</view>
						<image mode="widthFix" :src="digitalImage"></image>

						<!-- 视频克隆要求 -->
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>视频支持MP4/MOV格式 像素480P以上。</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>上传的视频要求15秒以上，容量500M以内。</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>视频全程只能有一张脸，且嘴巴不得遮挡。</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>人脸大小要是视频宽度1/5以上，1/2以下。</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>请使用原始录制视频不要有特效和字幕。</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>视频可以说1234，但不能有背景音乐。</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>清晰特别是嘴型清楚的视频成片效果更佳。</text>
						</view>
						<view class="c-but flex" @click="uploadClick()">立即上传视频 {{'('+"算力："+tallySet.avatar_tally+')'}}
						</view>
					</view>
				</template>
			</sunui-popup>


		</view>



		<view v-if="navIndex==1">
			<!-- <view :style="{ height: navTop + 'px' }"></view>
			<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
				v-show="!hiddenModel">
				<text>声音列表</text>
			</view>
			<view class="flex-start-center margin-bottom_50rpx" style="color:#333333;margin-left: 10rpx;"
				@click="localFn()">
		
				<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
				<text style="color: 333333;font-size: 33rpx;"> 声音列表</text>
			</view> -->


			<view class="display-a margin-bottom_40rpx margin-top_30rpx padding_0_20rpx">
				<view class="label" @click="getLabelone(0)"
					:style="selLabelOne == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					全部</view>
				<view class="label" @click="getLabelone(1)"
					:style="selLabelOne == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					生成中</view>
				<view class="label" @click="getLabelone(2)"
					:style="selLabelOne == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					生成成功</view>
				<view class="label" @click="getLabelone(3)"
					:style="selLabelOne == 3 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					生成失败</view>
				<view class="label" @click="getLabelone(4)"
					:style="selLabelOne == 4 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
					已退款</view>

			</view>

			<!-- 标准声音克隆 / 高保真声音克隆 -->
			<mescroll-body ref="mescrollRef" :height="windowHeight + 'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="display-fw-js ">
					<block v-for="(item, index) in list" :key="index">
						<block>
							<view class="list-public display-a">

								<view class="r-status" r-status-3
									:class="item.is_status == '1' ? 'color_FFFFFF' : item.is_status == '3' ? 'color_FF0000' :  item.is_status == '2'?'r-status-1':'r-status-3'">
									{{ item.is_status == '2' ? '已完成' : item.is_status == '3' ? '已失败' : item.is_status == '1'?'生成中':'已退款' }}
								</view>

								<image class="img-97" :src="digitalPeopleIndex3"></image>
								<view class="margin-left_16rpx">
									<view class="display-a">
										<!-- 	<view class="r-fast" :class="item.train_mode == 1 ? 'r-fast-1' : 'r-fast-2'">
								{{ item.train_mode == 1 ? '快速' : '高级' }}
							</view> -->


										<view class="r-name">{{item.name }}
										</view>
									</view>
									<view class="flex-align-center m-top10">
										<view class="" style="color: rgba(153, 153, 153, 1);">
											{{item.sex==1?'男':'女'}}
										</view>
										<text class="padding_0_10rpx" style="color: rgba(153, 153, 153, 1);">|</text>
										<view class="" style="color: rgba(153, 153, 153, 1);">
											{{item.age_group==1?'儿童':item.age_group==2?'青年':item.age_group==3?'中年':'中老年'}}
										</view>
										<text class="padding_0_10rpx" style="color: rgba(153, 153, 153, 1);">|</text>
										<view class="" style="color: rgba(153, 153, 153, 1);">
											{{item.language==0?'中文':item.language==1?'英文':item.language==2?'日语':item.language==3?'韩语':'俄语'}}
										</view>

										<!-- <view class="r-date">{{ item.create_time }} |</view> -->
										<view class="flex-align-center margin-left_16rpx" @click="delAudio(item)">
											<uv-icon
												class=" padding-right_10rpx icon-cls p-right10 font-size_30rpx color999"
												size="40rpx" style="margin:4rpx 14rpx 0rpx 20rpx;font-weight: 600;"
												name="trash"></uv-icon>
											<!-- <i class="el-icon-delete font-size_30rpx color999" style="margin:4rpx 14rpx 0rpx 20rpx;font-weight: 600;"></i> -->
											<view class="font-size_26rpx color999">删除</view>
										</view>
									</view>
								</view>
								<block v-if="item.is_status == '2'">
									<view class=" r-play" @click="pause(item,index)"
										v-if="!isPlay&& (index==currentIndex)">
										<image class="img-94" :src="digitalPeopPlay3"></image>
									</view>
									<view class="display-a-jc r-play" @click="play(item,index)" v-else>
										<image class="img-94" :src="digitalPeopPause3"></image>
									</view>
									<!-- 
							<view @click="play" v-if="isPlay"><image class="img-94" src="/static/digitalPeople/pause2.png"></image></view>
							<view @click="pause" v-else><image class="img-94" src="/static/digitalPeople/play2.png"></image></view> -->
								</block>
								<block v-else>
									<view class=" r-pause">
										<image class="img-94" :src="digitalPeople94"></image>
									</view>
								</block>
							</view>
						</block>

					</block>
					<!-- <image @click="delAudio(item.id, item.name)" class="img-96" :src="imgUrl + '96.png'"></image> -->
				</view>


			</mescroll-body>




		</view>
	</view>
</template>

<script>
	const base64 = require('@/utils/ali-oos/base64.js'); //Base64,hmac,sha1,crypto相关算法
	require('@/utils/ali-oos/hmac.js');
	require('@/utils/ali-oos/sha1.js');
	const Crypto = require('@/utils/ali-oos/crypto.js');
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				navTop: '',
				materialBg: this.$imgs.violet,
				group3389Nine: this.$imgs.group3389Nine,
				digitalImage: this.$imgs.digitalImage,
				group3376Nine: this.$imgs.group3376Nine,
				group3377Nine: this.$imgs.group3377Nine,

				group3378Nine: this.$imgs.group3378Nine,


				group3379Nine: this.$imgs.group3379Nine,
				group3380Nine: this.$imgs.group3380Nine,
				group3381Nine: this.$imgs.group3381Nine,






				tempFiles: [], //上传获取到的文件数组
				/* 上传视频start */
				formData: {
					key: '',
					policy: '',
					OSSAccessKeyId: '',
					signature: '',
					success_action_status: '200'
				},

				policyText: {
					expiration: '2050-01-01T12:00:00.000Z', //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
					conditions: [
						['content-length-range', 0, Number(uni.getStorageSync('upload_allow_size'))] // 设置上传文件的大小限制(104857600为：100MB，31457280为30MB)
					]
				},

				id: '',

				upPicUrl2: '',
				ossUrl: '', //上传阿里云返回视频路径
				videoShowUrl: '',
				name: '',
				webBgWidth: '',
				webBgHeight: '',
				list: [],
				isWhether: true,
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),
				duration: 0,

				// ==========================





				navIndex: 0,
				currentIndex: '',
				list: [],
				navTop: '',
				materialBg: this.$imgs.violet,
				arrTab1: [{
						id: '',
						name: '全部'
					},
					{
						id: 'init',
						name: '生成中'
					},
					{
						id: 'success',
						name: '已完成'
					},
					{
						id: 'fail',
						name: '已失败'
					}
				],
				cIndex: 0,
				selLabel: 0,
				digitalPeople94: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/94.png',

				digitalPeople131: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/131.png',
				digitalPeople132: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/132.png',
				digitalPeopleIndex3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/index3.png',
				digitalPeopPause3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/pause3.png',
				digitalPeopPlay3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/play3.png',
				isPlay: 1,
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				isWhether: true,
				urlVoice: '',


				tabList: [{
					name: '形象列表',
					id: '1' //null
				}, {
					name: '声音列表',
					id: '2' //null
				}, ],
				selLabelOne: 0,

				content: ['秋天的公园里，落叶铺满了小路，踏上去有种说不出的舒爽，偶然间抬头，那抹深秋的蓝天格外高远、明净。'],
				memberSetObj: {},
				tempFilesRes:''

				// sex: this.form.sex, // 1男2女
				// age_group: this.form.ageGroup, //1 儿童 2 青年3 中年4，中老年’
				// language: this.form.language, // 0中文1英文2日3韩4俄'

			}
		},
		onLoad() {

			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.createdgetSystemInfo()
			// ===================

			this.set();

			this.tallySetFn()
			this.userInfos()
			this.memberSetFn()


		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		onHide() {
			// 页面隐藏时调用
			console.log('页面隐藏');
			// 在这里执行需要的操作
			this.isPlay = '';

			if (this.urlVoice) {
				this.pause(this.urlVoice)
			}

		},
		onShow() {


			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});

		},
		computed: {


		},
		methods: {
			// 

			getChange(e) {
				console.log(e)
				this.navIndex = e

				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})



			},



			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},

			//保存到相册
			async longpress(url) {
				if (!this.isWhether) {
					return;
				}
				this.isWhether = false;
				
				uni.showLoading({
					title: '加载中...',
					mask: true
				});



				uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: r => {
									this.isWhether = true;
									uni.hideLoading();
									this.$sun.toast('保存视频成功');
								},
								fail: e => {
									console.log(res);
									if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail auth deny'
									) {
										uni.hideLoading();
										uni.showModal({
											title: '您需要授权相册权限',
											success(res) {
												if (res
													.confirm) {
													uni.openSetting({
														success(
															res
														) {},
														fail(
															res
														) {
															// console.log(res);
														}
													});
												}
											}
										});
									} else if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail file not exists'
									) {
										this.isWhether = true;
										uni.hideLoading();
										this.$sun.toast(
											'保存失败,视频文件不存在!', 'none'
										);
									} else {
										this.isWhether = true;
										uni.hideLoading();
										console.log('err==>', e);
										this.$sun.toast('保存失败',
											'error');
									}
								}
							});
						} else {
							this.isWhether = true;
							uni.hideLoading();
							this.$sun.toast('下载失败', 'error');
						}
					},
					fail: err => {
						uni.hideLoading();
						this.$sun.toast(err, 'error');
						this.isWhether = true;
					}
				});


			},
			// 复制订单号
			paste(url) {
				uni.setClipboardData({
					data: url,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制视频链接成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制是视频链接失败',
							icon: 'error'
						});
					}
				});


			},
			// 删除音频
			delavatar(obj) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该形象吗?',
					success: async res => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.avatarDel,
								data: {
									uid: uni.getStorageSync('uid'),
									avatar_id: obj.id
								}
							});
							if (result.errno == 0) {
								this.$sun.toast('删除成功');
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								this.$sun.toast(result.message, 'none');
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},

			async upCallback(scroll) {



				if (this.navIndex == 0) {
					const result = await this.$http.post({
						url: this.$api.avatarPage,
						data: {
							uid: uni.getStorageSync("uid"),
							is_status: this.selLabel == 0 ? '' : this.selLabel,
							page: scroll.num,
							psize: 10
						}
					});
					if (result.errno == 0) {

						this.mescroll.endByPage(result.data.list.length, result.data.total);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
						console.log(this.list)
					}
				} else {
					const result = await this.$http.post({
						url: this.$api.voiceList,
						data: {
							uid: uni.getStorageSync("uid"),




							is_status: this.selLabelOne == 0 ? '' : this.selLabelOne,

							page: scroll.num,
							psize: 10
						}
					});
					if (result.errno == 0) {

						this.mescroll.endByPage(result.data.list.length, result.data.total);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
						console.log(this.list)
					}
				}





			},



			/*  阿里云设置  */
			async set() {
				const result = await this.$http.get({
					url: this.$api.uploadSet,

				});
				if (result.errno == 0) {
					// accessKey 阿里云key秘钥 accessId 阿里云id
					console.log('result', result);
					this.upPicUrl2 = 'https://' + result.data.alioss_domain;
					this.formData.OSSAccessKeyId = result.data.alioss_access_key_id;
					this.formData.policy = base64.encode(JSON.stringify(this.policyText));
					let message = this.formData.policy;
					let bytes = Crypto.HMAC(Crypto.SHA1, message, result.data.alioss_access_key_secret, {
						asBytes: true
					});
					this.formData.signature = Crypto.util.bytesToBase64(bytes);

					console.log('------------formData', this.formData);
				}
			},
			// “上传文件” 视频点击事件
			uploadClick() {
				let that = this;
				uni.chooseVideo({
					sourceType: ['album'],
					compressed: false,
					// 如果type属性和extension同时存在，例如{type:'image',extension:['.png','.jpg']}，则会选择image/png,image/jpg文件
					// 如果只配置extension属性，例如{extension:['.doc','.xlsx','.docx']}，则会选择.doc,.xlsx,.docx文件，详情见accept属性
					// 在微信环境中，如果type="all"，则extension属性失效
					count: 1, //选取的文件个数限制
					// type: 'video', //all	从所有文件选择    video	只能选择视频文件   image	只能选择图片文件
					extension: ['.mp4', '.3gp', '.mov'], //可定义允许哪些后缀的文件可被选择
					success: res => {
						// let allLength = that.tempFiles.length + res.tempFilePath.length;
						console.log('点击上传事件res.tempFiles', res.tempFilePath.length, 'that.tempFiles', that
							.tempFiles.length);
						// if (allLength > 1) {
						// 	this.$sun.toast('当前限制选择 1 个文件');
						// 	return;
						// }
						that.tempFiles = [res.tempFilePath]; //要上传的文件
						that.tempFilesRes = [res];
						console.log('tempFiles======', that.tempFiles, 'res', res);
						this.duration = res.duration
						this.startUploading();
					}
				});
			},

			// 开始上传
			async startUploading() {
				// let that = this;
				// this.numCount = 0;
				if (this.tempFiles.length <= 0) {
					this.$sun.toast('请先上传文件', 'none');
					return;
				}

				let isLt = true;
				let numSize = Number(uni.getStorageSync('upload_allow_size'))/ 1024 / 1024;
				for (let i = 0; i < this.tempFiles.length; i++) {
					// 判断是否小于2mb
					if (this.tempFilesRes[i].size / 1024 / 1024 > numSize) {
						isLt = false;
					}
				}
				if (!isLt) {
					for (let i = 0; i < this.tempFiles.length; i++) {
						// 判断是否小于2mb
						if (this.tempFilesRes[i].size / 1024 / 1024 > numSize) {
							console.log('进入删除', i);
							this.tempFiles.splice(i, 1);
						}
					}
					this.$sun.toast('请上传小于' +  numSize.toFixed(2) + 'MB文件', 'none');
					return;
				}

				uni.showLoading({
					title: '上传中...'
				});
				for (let i = 0; i < this.tempFiles.length; i++) {
					let markIndex = this.tempFiles[i].lastIndexOf('.');
					let suffix = this.tempFiles[i].substring(markIndex);
					this.formData.key = new Date().getTime() + Math.floor(Math.random() * 150) + suffix;

					console.log('this.formData.key', this.formData.key, 'this.tempFiles[i].name', this.tempFiles[i]
						.name, 'this.tempFiles[i]', this.tempFiles[i]);

					// fileUrl放在上传（uploadFile）内，则只能获取到最后一个值
					let fileUrl = this.upPicUrl2 + '/' + this.formData.key;
					let formData = {
						...this.formData
					}; //需要这样赋值，否则for循环传值一致 
					// let type = this.tempFiles[i].type; //需要这样赋值，否则for循环传值一致
					console.log('fileUrl, type123', fileUrl, suffix, 'this.formData', this.formData);
					uni.uploadFile({
						name: 'file', //文件上传的name值
						url: this.upPicUrl2, //接口地址
						formData: formData, //上传额外携带的参数
						filePath: this.tempFiles[i], //临时路径
						success: uploadFileRes => {
							console.log('this.formData222222', this.formData);
							if (uploadFileRes.statusCode != 200) {
								uni.showToast({
									title: '上传失败 : ' + uploadFileRes.data,
									icon: 'none'
								});
								uni.hideLoading();
							} else {
								console.log('this.tempFiles[i]', this.tempFiles[i], 'uploadFileRes',
									uploadFileRes)

								uni.showLoading({
									title: '上传中...'
								});

								this.videoShowUrl = fileUrl;
								// 注册媒资 

								this.getVideoDimensions(this.videoShowUrl)

							}
						},
						fail: e => {
							uni.hideLoading();
							console.log(e)
							uni.showToast({
								title: '上传失败==>' + e,
								icon: 'none'
							});
						}
					});
				}
			},

			async avatarSaveFn(url) {
				console.log(url)

				if (this.duration < 15) {
					this.$sun.toast('请上传一段15秒以上的视频进行提交', 'none')
					return
				}

				const result = await this.$http.post({
					url: this.$api.avatarSave,
					data: {
						uid: uni.getStorageSync("uid"),
						video_url: url,
						name: this.name,
						width: this.webBgWidth,
						height: this.webBgHeight
					}

				});
				if (result.errno == 0) {
					console.log(result.data)

					this.taskStatis = result.data

					this.name = ''

					this.$refs.pop.close()

					this.$refs.pop2.close()
				

					this.mescroll.resetUpScroll();
					uni.hideLoading();
					setTimeout(()=>{
							this.$sun.toast(result.message, 'none')
					},500)

				} else {
					uni.hideLoading();
					setTimeout(()=>{
							this.$sun.toast(result.message, 'none')
					},500)
					
				}

			},
			getVideoDimensions(videoUrl) {
				console.log(videoUrl)
				

				wx.getImageInfo({
					src: videoUrl + '?x-oss-process=video/snapshot,t_1,ar_h,f_jpg',
					success: res => {
						uni.showLoading({
							title: '上传中...'
						});
						
						console.log(res, '视频宽高')
						this.webBgWidth = res.width; // 视频宽度
						this.webBgHeight = res.height; // 视频高度
                         
						this.avatarSaveFn(videoUrl);

					},
					fail: err => {
						uni.hideLoading();
						console.log(err)
						this.$sun.toast('获取宽高失败', 'none')
					}
				})


			},


			confirm() {
				if (!this.name) {
					this.$sun.toast('请填写数字人形象名称', 'none')
					return
				}

				this.$refs.pop2.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true,
					topclose: false
				});

				this.$refs.pop.close()
			},
			cancel() {
				this.$refs.pop.close()
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},
			addDigital() {


				if (this.user.is_member == 0 && this.memberSetObj.is_open == 1) {
					uni.showModal({
						title: '温馨提示',
						content: '你当前不是会员，请开通会员后享受该功能',
						confirmText: '开通会员',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {


								this.$sun.navGo('/pages/contactUs/memberCenter')

							} else if (res.cancel) {

							}
						}
					});
				} else {

					this.$refs.pop.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: true,
						topclose: false
					});
				}


			},

			localFn() {
				this.$sun.navBack()
			},



			// ================

			getLabel(index) {
				this.selLabel = index;

				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});



			},
			getLabelone(index) {
				this.selLabelOne = index;

				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});



			},
			async soundSaveFn(id, index) {
				let totalDeduction = ((this.content[0].length / 100) * this.tallySet.sound_tally).toFixed(2);
				if (totalDeduction < 100) {
					totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
				}

				if (Number(this.user.balance) <= Number(totalDeduction)) {
					this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				const result = await this.$http.post({
					url: this.$api.soundSave,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 0,
						task_id: 0,
						voice_id: id,
						msg: [this.content[0]]
					}
				});
				if (result.errno == 0) {

					uni.hideLoading()
					this.voiceSetDemoFn(id, result.data, index)


				} else {
					setTimeout(() => {
						this.$sun.toast(result.message, 'none')
					}, 200)
					uni.hideLoading()
				}
			},

			async voiceSetDemoFn(voice_id, sound_id, index) {
				const result = await this.$http.post({
					url: this.$api.voiceSetDemo,
					data: {
						uid: uni.getStorageSync('uid'),

						voice_id: voice_id,
						sound_id: sound_id
					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.currentIndex = index
					this.isPlay = '';

					this.urlVoice = result.data
					innerAudioContext.src = result.data
					setTimeout(() => {
						this.mescroll.resetUpScroll();
					}, 200)



					innerAudioContext.play();
					innerAudioContext.onPlay(() => {


						console.log('开始播放');
					});
					innerAudioContext.onEnded(() => {
						this.isPlay = 1;

						innerAudioContext.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');



					});
					innerAudioContext.onError(err => {
						innerAudioContext.destroy();
						console.log('播放音频出错：', err);
					});



				} else {
					this.$sun.toast(result.message, 'none');
				}
			},


			/* 声音播放 start */
			play(speech, index) {
				if (!speech.demo) {
					uni.showModal({
						title: '数字人试听',
						content: '每一百字扣 ' + this.tallySet.sound_tally + '算力,后续试听不在扣除算力',
						confirmText: '试听',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {

								this.soundSaveFn(speech.id, index)


							} else if (res.cancel) {

							}
						}
					});

				} else {

					this.currentIndex = index
					this.isPlay = '';

					this.urlVoice = speech.demo
					innerAudioContext.src = speech.demo




					innerAudioContext.play();
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					innerAudioContext.onEnded(() => {
						this.isPlay = 1;

						innerAudioContext.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');

						setTimeout(() => {
							this.mescroll.resetUpScroll();
						}, 200)

					});
					innerAudioContext.onError(err => {
						innerAudioContext.destroy();
						console.log('播放音频出错：', err);
					});

				}




			},
			pause(speech) {

				this.isPlay = 1;
				innerAudioContext.src = speech.demo
				// 获取音频时长
				innerAudioContext.autoplay = true;
				this.$nextTick(() => {
					innerAudioContext.pause();
				});
			},
			

			// 删除音频
			delAudio(obj) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此声音吗?',
					success: async res => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.voiceDel,
								data: {
									uid: uni.getStorageSync('uid'),
									voice_id: obj.id
								}
							});
							if (result.errno == 0) {
								this.$sun.toast('删除成功');
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								this.$sun.toast(result.message, 'none');
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},

			localFn() {
				this.$sun.navBack()
			},




		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		// padding: 20rpx;
		position: relative;

		.label {
			background-color: #fff;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-right: 20rpx;


		}

		// “新建文件夹” 弹框
		.v-pop-cls {
			padding: 40rpx 26rpx 60rpx;
			border-radius: 20rpx;
			width: 644rpx;
			background-color: #fff;

			.confirm-btn {
				padding: 0 60rpx;
			}

			.must {
				color: red;
				margin-left: 8rpx;
			}

			.radio-cls {
				transform: scale(0.8);
			}

			.input-frame,
			.no-input-frame {
				padding: 20rpx;
				border-radius: 10rpx;
				width: 360rpx;
			}

			.input-frame {
				border: 2rpx solid #d9d9d9;
			}

			.no-input-frame {
				background: #f0f0f0;
				border: 2rpx solid #f0f0f0;
			}

			.input-frame2 {
				width: 400rpx;
			}
		}

		// 按钮样式
		.c-but {
			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, rgb(188, 120, 248), rgb(135, 80, 242) 100%);
		}

		.add-digital-cls,
		.digital-card-cls {
			border-radius: 20rpx;
			height: 470rpx;
			margin-right: 10rpx;
		}

		.add-digital-cls {
			width: 32%;
			// margin-left: 20rpx;
			border: 2rpx dashed rgb(235, 234, 234);
			background: linear-gradient(144.13deg, rgba(255, 255, 255, 0) 37.281%, rgba(41, 144, 255, 0.21) 95.242%);

			image {
				width: 54rpx;
			}

			view {
				color: rgb(36, 157, 255);
				margin-top: 10rpx;
			}
		}

		.container {
			/* 矩形 5870 */
			width: 32%;
			// height: 388rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			.mask {
				position: absolute;
				/* 矩形 5876 */
				width: 230rpx;
				height: 338rpx;
				top: 0;
				left: 0;
				border-radius: 20rpx;
				z-index: 99;
				color: #fff;

				background: rgba(17, 18, 23, 0.66);
			}

			.statusColorG {
				position: absolute;
				top: 0;
				left: 0;
				/* 矩形 5879 */
				width: 102rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: #fff;
				background: rgba(49, 169, 82, 1);
				font-size: 21rpx;
				z-index: 999;
			}

			.statusColorR {
				position: absolute;
				top: 0;
				left: 0;
				/* 矩形 5879 */
				width: 102rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: #fff;
				background: red;
				font-size: 21rpx;
				z-index: 999;
			}

			.statusColorB {
				position: absolute;
				top: 0;
				left: 0;
				/* 矩形 5879 */
				width: 102rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: #fff;
				background: blue;
				font-size: 21rpx;
				z-index: 99;
			}

			.digitImg {
				// width: 33.3%;
				height: 338rpx;
				border-radius: 20rpx;

			}

			.icon {
				/* 下载 */
				width: 32rpx;
				height: 32rpx;
			}


		}

		/* 训练前提示 弹框 */
		.v-pop-cls {
			padding: 62rpx 24rpx 30rpx;
			background-color: #fff;
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.video-title-cls {
				background: linear-gradient(102.95deg, rgb(29, 130, 255), rgb(226, 79, 250));
				-webkit-background-clip:
					text;
				-webkit-text-fill-color:
					transparent;
				background-clip:
					text;
				text-fill-color:
					transparent;
				font-size: 40rpx;
				font-weight: 600;
				letter-spacing: 0%;
			}

			.detail-cls {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				font-weight: 600;
				margin: 30rpx 0;
			}

			image {
				width: 100%;
			}

			.hint-cls {
				margin-top: 20rpx;

				view {
					width: 16rpx;
					height: 16rpx;
					background: rgba(23, 218, 112, 1);
					border-radius: 50%;
					margin-right: 10rpx;
				}

				text {
					color: rgb(153, 153, 153);
					font-size: 26rpx;
				}
			}
		}

		// =====================

		.label {
			background-color: #fff;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-right: 20rpx;


		}

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}


		.color_9B9B9B {
			color: #9b9b9b;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.color_4088FF {
			color: #4088ff;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.c-line-2 {
			// background: #000;
		}

		.c-line-1 {
			background: rgb(30, 108, 235);
		}

		.c-line {
			width: 66rpx;
			height: 8rpx;
			border-radius: 100rpx;
		}

		.display-ac-jc {
			width: 375rpx;
		}

		.c-top {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f1f1f1;
			// border-bottom: 2rpx solid rgb(18, 18, 18);;
		}

		.r-text {
			text-align: center;
			font-size: 26rpx;
			padding-top: 440rpx;
		}

		.o-input {
			width: 300rpx;
			margin-left: 10rpx;
			// color: #fff;
		}

		.o-search {
			width: 710rpx;
			background-color: #fff;
			border-radius: 100rpx;
			margin: 0 20rpx 30rpx;
			padding: 16rpx 0;
		}

		.tab-name-2 {
			background-color: #008eff;
			color: #fff;
		}

		.tab-name-1 {
			background-color: #fff;
			color: #999999;
		}

		.tab-name {
			width: 120rpx;
			text-align: center;
			padding: 8rpx 0;
			border-radius: 10rpx;
			margin-left: 30rpx;
		}

		.p-data {
			padding: 40rpx 0;
			text-align: center;
			width: 750rpx;
		}

		.img-59 {
			width: 32rpx;
			height: 32rpx;
		}

		.r-img-bg {
			width: 344rpx;
			height: 610rpx;
			border-radius: 10rpx 10rpx 0 0;
			background-repeat: no-repeat;
			background-size: contain;
		}

		.img-cls {
			color: #fff;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			background-color: rgba(102, 102, 102, 0.5);
		}

		.r-video {
			width: 344rpx;
			height: 610rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.r-status-3 {
			background-color: #ff0000 !important;
		}

		.r-status-2 {
			background-color: #07bd00 !important;
		}

		.r-status-1 {
			background-color: #1377ff !important;
		}

		.r-status {
			width: 100rpx !important;
			padding: 6rpx 0;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 26rpx;
			color: #fff !important;
			z-index: 2;
		}


		.r-frame {
			width: 344rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			position: relative;
		}

		.boxline {
			background-color: #008eff;
			color: #fff;
			width: 98rpx;
			height: 50rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
		}

		/* 声音克隆样式 start */

		.r-status-1 {
			color: #b4b4b4;
		}

		.r-status {
			position: absolute;
			top: 0;
			right: 0;
			width: 86rpx;
			text-align: center;
			border-radius: 0 10rpx 0 10rpx;
			background-color: #6b6b6b;
			padding: 6rpx 0;
			font-size: 24rpx;
		}

		.r-statusaudio {
			position: absolute;
			top: 0;
			left: 0;
			width: 95rpx !important;
			padding: 6rpx 0;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
			background-color: #6b6b6b;
			font-size: 26rpx;
			color: #fff !important;
			z-index: 2;
		}


		.r-date {
			color: #aaa9a9;
			font-size: 26rpx;
		}

		.r-name {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			font-weight: 600;
			width: 350rpx;
		}

		.r-fast-2 {
			background: linear-gradient(90deg, rgb(0, 177, 255), rgb(0, 82, 255) 100%);
		}

		.r-fast-1 {
			background: linear-gradient(104.04deg, rgb(228, 113, 247) 1.66%, rgb(100, 27, 227) 96.68%);
		}

		.r-fast {
			width: 64rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			text-align: center;
			color: #fff;
			margin-right: 10rpx;
			padding: 2rpx 0;
		}

		.img-96 {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			margin-left: 24rpx;
		}

		.img-94 {
			width: 100%;
			height: 100%;
		}

		.r-pause {
			width: 56rpx;
			height: 56rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
			opacity: 0.5;
			/* 设置透明度为50% */
		}

		.r-play {
			width: 56rpx;
			height: 56rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
		}

		.img-97 {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}

		.list-public {
			padding: 40rpx 30rpx;
			position: relative;
		}

		.releaseTasks {
			text-align: center;
			color: #fff;
			width: 340rpx;
			height: 74rpx;
			line-height: 74rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			background: #1e6ceb;
		}

		/* 声音克隆样式 end */

		page {
			width: 100%;
			overflow-x: hidden;
			// background-color: #000;
			// border-top: 2rpx solid rgb(56, 56, 56);
		}

		//============ 

	}
</style>